<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
        <el-row :gutter="12">
            
        </el-row>
        <el-row>
            <el-table :data="tableData.menu_list" stripe class="table">
                <el-table-column prop="id" label="id"  />
                <el-table-column prop="name" label="名称"  />
                <el-table-column prop="path" label="路径"  />
                <el-table-column prop="level" label="等级" >
                    <template #default="scope">
                        <el-tag v-if="scope.row.level == 1">一级</el-tag>
                        <el-tag v-else type="success">二级</el-tag>
                    </template>       
                </el-table-column>
            </el-table>
        </el-row>
    </el-card>
</template>

<script setup>
import { ArrowRight, Search, CirclePlus } from '@element-plus/icons-vue'
import api from '@/api/index.js';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';

const tableData = reactive({
    menu_list: []
})

onMounted(()=>{
    get_menu_list()
})

const get_menu_list = () => {
    api.get_menu_list().then(res =>{
        tableData.menu_list = res.data.data
        // console.log(res);
    })
}

</script>

<style scoped>
.box-card {
    margin-top: 20px;
}

.table {
    margin-top: 10px;
}
</style>